<template>
	<view>
		<view 
		v-if="showType == 'top'"
		class="top-btn" 
		:style="{
			'z-index': scrollTop1 > goTopbu ? 99 : -1,
			'opacity': scrollTop1 > goTopbu ? 1 : 0,
		}"
		@click="goTop">
			<view 
			class="fab-icon icon-top"></view>
		</view>
		
		<view
		v-if="showType == 'home'"
		class="home-btn" 
		@click="goHome">
			<view 
			class="fab-icon icon-home"></view>
		</view>
		
	</view>
</template>
<script>
	export default {
		props: {
			scrollTop: {//滚动的距离
				type: [Number],
				default:()=>{
					return 0
				}
			},
			goTopbu: {//距离顶部的距离显示
				type: [Number],
				default:()=>{
					return 400
				}
			},
			showType: {//显示的类型 1.top 2.home
				type: [String],
				default:()=>{
					return 'top'
				}
			}
		},

		data() {
			return {
				animation: "",
				scrollTop1:0,
			}
		},
		watch:{
			scrollTop(val){
				this.scrollTop1 = val
			}
		},
		mounted() {},
		methods: {
			goHome(){//返回首页
				uni.switchTab({
					url:'/pages/tabBar/index'
				})
			},
			goTop() {//置顶
				console.log(this.scrollTop)
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 150
				})
				this.$emit("onGoTop");
			}
		},
	};
</script>
<style lang="less" scoped>
	.top-btn,
	.home-btn {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		line-height: 86rpx;
		z-index: 130;
		color: #fff;
		overflow: hidden;
		text-align: center;
		font-size: 20rpx;
		transition: opacity .4s;
	}

	.fab-icon {
		vertical-align: middle;
		background-size: 100% 100%;
		display: block;
		width: 100%;
		height: 100%;
	}

	.top-btn {
		right: 20rpx;
		bottom: 190rpx;

		.icon-top {
			background-image: url('~static/comm/top.png');
		}
	}

	.home-btn {
		right: 20rpx;
		bottom: 300rpx;

		.icon-home {
			background-image: url('~static/comm/home.png');
		}
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
			display: block;
		}
 
		to {
			opacity: 1;
			display: none;
		}
	}

	.fadeIn {
		animation-name: fadeIn;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
			display: none;
		}

		to {
			opacity: 0;
			display: block;
		}
	}

	.fadeOut {
		animation-name: fadeOut;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}
</style>
